<template>
  <div class="all">
    <div class="left">
      <div class="outer" v-for="t in demand.info" :key="t._id">
        <div class="inner" @click="passinfo(t)">
          <div class="detail">{{ t.Item_name }}----{{ t.main_person }}</div>
        </div>
      </div>
    </div>
    <div class="right" @click="isShow = true">
      <div class="inner" v-if="!isShow">
        <h3>点击左侧项目列表以查看项目详情,并可跳转至该项目</h3>
      </div>
      <div class="inner" v-if="isShow">
        <div class="realdiv" v-if="!isChange">
          <h3>项目详细信息</h3>
          <label
            ><div class="left_tip">项目名称:</div>
            <div class="right_info">{{ name }}</div></label
          >
          <label
            ><div class="left_tip">组织名称:</div>
            <div class="right_info">{{ org_name }}</div></label
          >
          <label
            ><div class="left_tip">项目创建人:</div>
            <div class="right_info">{{ charge }}</div></label
          >

          <label
            ><div class="left_tip">创建时间:</div>
            <div class="right_info">{{ day }}</div></label
          >

          <label
            ><div class="left_tip">组织地址:</div>
            <div class="right_info">{{ addr }}</div></label
          >

          <label
            ><div class="left_tip">项目简介:</div>
            <div class="right_info">{{ detail }}</div></label
          >

          <!-- 有点难实现 --- 第三轮迭代实现 -->
          <el-row class="mb-4 outerbtn">
            <el-button class="btn" type="primary" @click="jumpInto" round
              >跳转至该项目</el-button
            >
          </el-row>
          <label v-if="tips">
            <div class="tips">跳转成功</div>
            </label>      
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, ref } from "@vue/reactivity";
import { onMounted } from "@vue/runtime-core";
import { useStore } from "vuex";
import axios from 'axios'
export default {
  name: "watch",
  setup() {
    let demand = reactive({
      info: [],
    });
    let name = ref("");
    let charge = ref("");
    let detail = ref("");
    let day = ref("");
    let addr = ref("");
    let org_name = ref("");
    let isShow = ref(false);
    let isChange = ref(false);
    let fornow = ref("");
    const store = useStore();
    // tips
    let tips = ref(false);
    onMounted(() => {
      if (store.state.real_Item == "") {
        let data = JSON.parse(sessionStorage.getItem("cloud"));
         store.commit('useSessionStorage',[data.ItemID,data.DemandList,data.ItemList,data.main_person,data.real_Item,data.usernow,data.real_Demand])
      }
      demand.info = store.state.ItemList;
    });

    function passinfo(t) {
      isShow.value = true;
      isChange.value = false;

      name.value = t.Item_name;
      day.value = t.createdAt.split("").splice(0, 10).join("");
      addr.value = t.organization_addr;
      detail.value = t.simple_Info;
      charge.value = t.main_person;
      org_name.value = t.organization_name;
      fornow.value = t.Item_ID;
    }

    function jumpInto() {
      // 跳转至该项目  
      store.commit('jumpItem',fornow.value)
      // 重新进行sessionStorage存储 名称叫做cloud
      sessionStorage.setItem("cloud", JSON.stringify(store.state));
      // console.log(JSON.parse(sessionStorage.getItem('cloud')))
      tips.value = true

      axios({
        method:'post',
        url:'https://qcjk2s.api.cloudendpoint.cn/lastitem',
        data:{
          id:store.state.usernow.id,
          lastItemID:store.state.ItemID
        }
      }).then(
        res => {console.log('win')},
        err => {console.log(err.message)}
      )
    }

    return {
      name,
      demand,
      isShow,
      isChange,
      charge,
      detail,
      day,
      org_name,
      addr,
      tips,
      fornow,
      passinfo,
      jumpInto,
    };
  },
};
</script>

<style lang="less" scoped>
.all {
  height: 100%;
  width: 100%;
  .left {
    width: 49.5%;
    height: 100%;
    float: left;
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    .outer {
      height: 10%;
      width: 100%;
      overflow: auto;
      scrollbar-width: none;
      /* Firefox */
      -ms-overflow-style: none;
      border-bottom: 1px solid #ccc;
      .inner {
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
      }
    }
  }
  .right {
    width: 49.5%;
    height: 100%;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    .inner {
      width: 100%;
      height: 70%;
      h3 {
        margin-bottom: 5%;
        font-size: 18px;
        color: #409efc;
      }
      .realdiv {
        width: 100%;
        height: 100%;
        label {
          width: 100%;
          height: 5%;
          display: block;
          margin-bottom: 5%;
          .left_tip {
            float: left;
            width: 50%;
            text-align: right;
          }
          .right_info {
            float: left;
            width: 50%;
            text-align: left;
          }
          .tips{
            margin-top: 3%;
            color: red;
          }
        }
      }
      .outerbtn {
        .btn {
          width: 200px;
          margin: 0 auto;
        }
      }
    }
  }
}
</style>